React Fiber

调度器如何找到要执行的下一个工作单元

how the scheduler finds the next unit of work to perform.

React Fiber 的调度器负责根据其优先级水平确定应该执行哪些工作单元。调度器利用工作循环算法不断检查最高优先级的工作，并安排其执行。

工作循环算法：

初始化：调度器首先通过初始化其数据结构并设置初始状态开始。

优先级队列：React 维护一个挂起工作的优先级队列，其中每个工作单元都与一个优先级级别相关联。具有较高优先级级别的工作会在较低优先级的工作之前处理。

工作选择：调度器遍历优先级队列，选择准备执行的最高优先级工作单元。此决定基于诸如更新类型（例如，用户交互、数据获取）及其相关优先级级别等因素。

执行：一旦选择了工作单元，调度器启动其执行，这可能涉及呈现组件、更新虚拟 DOM 和执行副作用。

完成：执行所选工作单元后，调度器更新其内部状态并重复该过程以找到下一个最高优先级工作。

如何通过 Fiber 树跟踪和传播优先级

how priority is tracked and propagated through the fiber tree.

优先级跟踪和传播确保 React 能够有效地对组件树内的不同类型的工作进行优先级和调度。树中的每个 Fiber 都包含与其优先级水平相关的元数据，调度器使用这些信息来确定执行顺序。

优先级分配：

工作初始化：当创建新的工作单元（例如，响应状态更新或事件）时，它会根据其类型和重要性分配优先级级别。

传播：随着工作在 Fiber 树中的进展，每个 Fiber 的优先级级别会传播到其子级。这确保了子组件继承其父级的优先级，使 React 能够维护一致的优先级层次结构。

动态调整：React 还支持基于运行时条件的动态优先级调整。例如，交互式用户界面元素的优先级在用户交互期间可能会提升，以确保响应灵敏的用户体验。

优先级级别：

高优先级：需要立即处理的关键更新，例如用户交互或动画。

中优先级：重要但不是时间敏感的更新，例如数据获取或渲染后台任务。

低优先级：非紧急更新，可以推迟处理，例如预渲染或后台处理。

调度器如何知道何时暂停和恢复工作

how the scheduler knows when to pause and resume work.

React Fiber 的调度器集成了暂停和恢复工作的机制，以防止 UI 卡顿并保持响应性。这些机制基于启发式算法，考虑因素包括用户交互、动画帧和可用系统资源。

暂停和恢复的启发式算法：

用户交互：调度器监视用户交互，例如点击和键盘事件，以确定何时暂停较不重要的工作并优先处理用户发起的更新。

动画帧：通过与浏览器的动画帧循环同步，React 可以在帧之间的空闲期间安排高优先级的工作，确保平滑的动画和过渡。

系统负载：React 监视系统资源并根据需要调整其调度行为。例如，在 CPU 使用率高的时候，调度器可能会限制后台任务的执行，以避免影响整体系统性能。

工作如何刷新并标记为完成

how work is flushed and marked as complete.

一旦执行了一个工作单元，React 就会将更改刷新到渲染环境并将工作标记为完成。这个过程涉及更新虚拟 DOM、执行副作用和通知调度器工作完成的情况。

刷新更改：

虚拟 DOM 更新：React 将工作单元执行期间所做的更改与虚拟 DOM 的当前状态进行协调，确定需要更新、添加或移除的元素。

渲染树生成：根据协调的更改，React 生成表示应用程序更新状态的新渲染树。然后使用此渲染树来更新实际的 DOM 或其他渲染目标。

执行副作用：React 执行与已完成工作相关的任何副作用，例如生命周期方法、事件处理程序或异步回调。

标记工作为完成：

完成标志：每个工作单元都与表示其执行状态的完成标志相关联。这些标志会随着工作通过渲染管道而更新。

调度器通知：一旦工作完全执行并将其更改刷新到渲染环境中，React 就会通知调度器其完成情况。这允许调度器更新其内部状态并继续处理其他工作。

副作用（例如生命周期方法）的工作原理

how side-effects (such as lifecycle methods) work.

副作用，例如生命周期方法（例如 componentDidMount、componentDidUpdate）、事件处理程序和异步操作，在 React 组件行为中发挥着关键作用。React Fiber 通过一系列的协调、调度和执行策略来管理副作用。

生命周期方法：

组件生命周期：React 组件具有包括挂载、更新和卸载等各种阶段的生命周期。生命周期方法允许组件在其生命周期的特定时间点执行操作，例如初始化状态、获取数据或清理资源。

执行顺序：生命周期方法在组件生命周期内以预定义的顺序执行。例如，componentDidMount 在首次渲染组件后调用，而 componentDidUpdate 在后续更新后调用。

效果依赖性：React Fiber 跟踪副作用之间的依赖关系，以确保它们按正确的顺序执行并且仅在必要时执行。这使得 React 能够通过跳过不必要的副作用执行来优化性能。

事件处理和异步操作：

事件传播：React 通过一个合成事件系统来管理事件处理，该系统规范化了浏览器的不一致性，并为处理用户交互提供了统一的接口。

异步操作：React 支持异步操作，例如数据获取或定时器，通过像 promises、async/await 或使用调度器调度任务的机制来实现。

什么是协程以及如何使用它来实现上下文和布局等功能

what a coroutine is and how it can be used to implement features like context and layout.

协程是一种编程构造，它实现了协作式多任务处理，允许函数在保留其执行状态的同时将控制权返回给调用者。React Fiber 利用协程来实现上下文传播、布局计算和异步渲染等功能。

协程基础：

协作式多任务处理：与传统的线程或进程不同，协程会自愿将控制权让给其他协程，允许多个任务在没有抢占式调度的情况下并发执行。

状态保持：协程在挂起期间保持其执行状态，允许它们从悬停点恢复执行，而不会丢失上下文或中间结果。

React Fiber 中的使用情况：

上下文传播：React 使用协程来传播上下文信息（例如主题、本地化）到组件树中，而不需要在每个级别手动传递 props。协程使组件能够从其祖先组件中访问上下文值，而不会直接耦合它们。

布局计算：协程通过允许组件在渲染过程中放弃控制来促进增量布局计算。这使得 React 能够异步执行布局更新，从而提高响应性和感知性能。

异步渲染：协程使 React Fiber 能够实现异步渲染技术，例如并发模式、悬停和延迟加载。组件可以挂起渲染以等待数据、资源或其他异步任务完成，从而确保流畅的用户体验。

通过利用协程，React Fiber 实现了高效的、非阻塞的任务执行。